<!DOCTYPE html>
<html lang="en">
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../js/bootstrap-select/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="../js/bootstrap-select/js/bootstrap-select.js"></script>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>设备信息列表</title>

    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
    </style>

</head>
<body>
<script>
    type="text/javascript">
    function indexFormatter(value, row, index) {
        return index+1;
    }
</script>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/device/searchDevice" id="logo">测试设备管理系统
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li>
                    <a href="#logSetting1" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-th-large"></i>
                        设备管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="searchDevice"><i class="glyphicon glyphicon-phone"></i>设备列表</a></li>
                        <li><a href="http://www.umeng.com/"><i class="glyphicon glyphicon-globe"></i>友盟数据</a></li>
                        <li><a href="showPieChart"><i class="glyphicon glyphicon-calendar"></i>图表统计</a></li>
                    </ul>
                </li>
                <!--</li>-->
                <!--<li>-->
                    <!--<a href="searchDevice">-->
                        <!--<i class="glyphicon glyphicon-th-large"></i>-->
                        <!--测试机列表-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a href="/device/addDeviceUI">-->
                        <!--<i class="glyphicon glyphicon-phone"></i>-->
                        <!--新增测试机-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a href="showPieChart">-->
                        <!--<i class="glyphicon glyphicon-calendar"></i>-->
                        <!--图表统计-->
                    <!--</a>-->
                <!--</li>-->

                <li>
                    <a href="searchApk">
                        <i class="glyphicon glyphicon-gift"></i>
                        安装包管理
                    </a>
                </li>
                <li>
                    <a href="#logSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-search"></i>
                        质量统计
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="logMonitoring"><i class="glyphicon glyphicon-eye-open"></i>ELK日志监控</a></li>
                        <li><a href="http://10.37.18.77:8430/index.html"><i class="glyphicon glyphicon-eye-open"></i>APP代码覆盖率</a></li>
                        <li><a href="http://10.37.18.82:8444/index.html"><i class="glyphicon glyphicon-eye-open"></i>平台代码覆盖率</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>PASSPORT日志监控</a></li>
                    </ul>

                </li>
                <li>
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">

            <div class="container">
                <div>
                    <font size="6">测试设备展示列表:</font>
                </div>
                <div class="form-inline">
                    设备名称:<input id="search_name" class="form-control" name="search_name" class="form-control input-sm" placeholder="">
                    &nbsp;&nbsp;&nbsp;&nbsp;系统:
                    <select id="search_os" name="search_os" class="selectpicker">
                        <option value="all" selected="">全部</option>
                        <option value="1">Android</option>
                        <option value="2">IOS</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;系统版本: <input id="search_os_version" class="form-control" name="search_os_version" class="form-control input-sm" placeholder="">
                    <br>
                    保管人&nbsp;&nbsp;&nbsp;: <input id="search_owner" class="form-control" name="search_owner"  class="form-control input-sm" placeholder="">

                    &nbsp;&nbsp;&nbsp;&nbsp;分组:
                    <select id="search_group" name="search_group" class="selectpicker">
                        <option value="all" selected="">全部</option>
                        <option value="1">平台-APP</option>
                        <option value="2">平台-新业务</option>
                        <option value="3">平台-三方</option>
                        <option value="4">自营-家政</option>
                        <option value="5">自营-丽人</option>
                        <option value="6">自营-速运</option>
                        <option value="7">中台-中台</option>
                    </select>

                    &nbsp;&nbsp;&nbsp;&nbsp;分辨率:&nbsp;&nbsp;&nbsp; <input id="search_resolution" class="form-control" name="search_resolution"  class="form-control input-sm" placeholder="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-success" onclick="queryForm()">查询</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-danger" onclick="loadAddDevicePage()">新增设备</button>
                </div>

            </div>
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                        <tr>
                            <th  data-field="index" data-formatter="indexFormatter" >序号</th>
                            <th>设备名称</th>
                            <th>设备系统</th>
                            <th>系统版本</th>
                            <!--<th>资产编码</th>-->
                            <th>分辨率</th>
                            <th>分组</th>
                            <th>保管人</th>
                            <th>借用人</th>
                            <th>归还日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="deviceTable">
                        #set ($i=1)
                        #foreach($device in $devices)

                        <tr>
                            <input type="hidden" value="${device.id}" name="deviceId"/>
                            <td>${i}</td>
                            <td>${device.device_name}</td>
                            <td>${device.os}</td>
                            <td>${device.os_version}</td>
                           <!-- <td>${device.device_number}</td>-->
                            <td>${device.resolution}</td>
                            <td>${device.group_info}</td>
                            <td>${device.owner}</td>
                            <td>${device.borrower}</td>
                            <td>
                                <input class="form-control"  name="backTime" id="backTime" value="${device.backdate}" readonly="readonly">
                            </td>
                            <td>
                                <button data-toggle="modal" href="/device/getDeviceDetail?deviceId=${device.id}"
                                        data-target="#myModal" class="btn btn-primary" type="button"
                                        >查看</button>
                                <button data-toggle="modal" href="/device/editDeviceUI?deviceId=${device.id}"
                                        data-target="#editModal" class="btn btn-info" type="button"
                                       >编辑</button>
                                <button data-toggle="modal" href="/device/borrowDeviceUI?deviceId=${device.id}"
                                        data-target="#borrowModal"
                                        class="btn btn-warning" type="button" onclick="borrowDevice('${device.id}')">借用</button>

                            </td>
                        </tr>
                        #set($i=$i+1)
                        #end

                        </tbody>
                    </table>
                </div>
            </div>
    </div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--编辑模态框-->
<div class="modal fade" id="borrowModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>
<script>

    function queryForm(){
        var search_name=encodeURI($("#search_name").val());
        var search_group=$("#search_group").val();
        var search_os=$("#search_os").val();
        var search_owner=encodeURI($("#search_owner").val());
        var search_os_version = $("#search_os_version").val();
        var search_resolution = $("#search_resolution").val();
        var para='search_name='+search_name+"&search_group="+search_group+"&search_os="+search_os+"&search_owner="+search_owner+"&search_os_version="+search_os_version+"&search_resolution="+search_resolution;
        var PARA = encodeURI(para);
        window.location.replace("/device/searchDevice?"+PARA);
    }
    function loadAddDevicePage(){
        window.location.replace("/device/addDeviceUI");
    }
    function loadEditDevicePage(id){

        window.location.replace("/device/editDeviceUI?deviceId="+id);
    }
//    function borrowDevice(id){
//        window.location.replace("/device/borrowDeviceUI?deviceId="+id);
//    }
//    function deviceDetail(id){
//        window.location.replace("/device/getDeviceDetail?deviceId="+id);
//    }
</script>

</html>